<template>
  <div>
    <!-- 头部 -->
    <header class="pl-10 pr-10 flex jc-sa aic bg-fff fixed w100pc">
      <img src="https://img.villaday.com/images/activity/demand/logo.png" alt>
      <div class="input flex jc-sa aic f12">
        <i class="iconfont iconxiaoxi-"></i>
        <input type="text" placeholder="搜索关键字/城市/别墅名">
      </div>
      <p class="flex jc-sa aic">
        <span class="f14">深圳</span>
        <i class="iconfont iconxiala"></i>
      </p>
    </header>

    <!-- 城市导航条 -->
    <ul class="nav flex jc-sa aic bg-fff f12">
      <li class="bg-f5">
        <span>深圳</span>
      </li>
      <li>
        <span>广州</span>
      </li>
      <li>
        <span>上海</span>
      </li>
      <li>
        <span>北京</span>
      </li>
      <li>
        <span>城都</span>
      </li>
      <li>
        <span>哈尔滨</span>
      </li>
      <li>
        <span>乌鲁木齐</span>
      </li>
      <li>
        <span>武汉</span>
      </li>
    </ul>

    <!-- 广告图 -->
    <div class="show"></div>

    <!-- 热门推荐 -->
    <ul class="recommend flex jc-sa aic bg-fff f12">
      <li class="flex2 aic">
        <img src="https://img.villaday.com/images/scene/8/8-14931184942460.jpg" alt>
        <p>度假别墅</p>
      </li>
      <li class="flex2 aic">
        <img src="https://img.villaday.com/images/scene/2/2-15181678196720.jpg" alt>
        <p>民宿客栈</p>
      </li>
      <li class="flex2 aic">
        <img src="https://img.villaday.com/images/scene/9/9-15275976453190.jpg" alt>
        <p>海景公寓</p>
      </li>
      <li class="flex2 aic">
        <img src="https://img.villaday.com/images/scene/5/5-14931185084110.jpg" alt>
        <p>轻奢酒店</p>
      </li>
      <li class="flex2 aic">
        <img src="https://img.villaday.com/images/scene/3/3-14931178046310.jpg" alt>
        <p>享乐温泉</p>
      </li>
      <li class="flex2 aic">
        <img src="https://img.villaday.com/images/scene/6/6-14931178414990.jpg" alt>
        <p>畅玩轰趴</p>
      </li>
      <li class="flex2 aic">
        <img src="https://img.villaday.com/images/scene/7/7-14794355795280.jpg" alt>
        <p>畅玩轰趴</p>
      </li>
      <li class="flex2 aic">
        <img src="https://img.villaday.com/images/scene/23/23-15169343495470.jpg" alt>
        <p>热情三亚</p>
      </li>
    </ul>

    <!-- 热门城市 -->
    <div class="hotCity bg-fff mt-10">
      <!-- 头部 -->
      <div class="head flex jc-sb aic pl-5 pr-5">
        <span class="fg1 f14 hot">热门城市</span>
        <span class="f12">更多城市</span>
        <i class="iconfont iconrightArrow ml-5 fff"></i>
      </div>

      <!-- 城市 -->
      <ul class="flex aic f12">
        <li>
          <span>深圳</span>
        </li>
        <li>
          <span>惠州</span>
        </li>
        <li>
          <span>广州</span>
        </li>
        <li>
          <span>清远</span>
        </li>
        <li>
          <span>河源</span>
        </li>
        <li>
          <span>江门</span>
        </li>
        <li>
          <span>厦门</span>
        </li>
        <li>
          <span>三亚</span>
        </li>
      </ul>
    </div>

    <!-- 目的地推荐 -->
    <div class="address bg-fff mt-10">
      <!-- 头部 -->
      <div class="head flex jc-sb aic pl-5 pr-5">
        <span class="fg1 f14 hot">目的地推荐</span>
        <span class="f12">更多目的地</span>
        <i class="iconfont iconrightArrow ml-5 fff"></i>
      </div>

      <!-- 地点 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul>
          <li class="li" v-for="(item,index) in list" :key="index">
            <router-link to="/goods">
              <img v-lazy="`https://img.villaday.com${item.imageURL}`">
              <div class="text">
                <h3 class="lh15">{{item.address}}</h3>
                <p class="f12 f999 lh15">{{item.desc}}</p>
                <p class="area fcc fff pl-10 pr-10 mt-5">
                  <i class="iconfont iconlocation f12"></i>
                  <span class="f12">{{item.name}}</span>
                </p>
              </div>
            </router-link>
          </li>
        </ul>
      </van-list>
    </div>

    <!-- 底部 -->
    <Footer page="home"/>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
export default {
  data() {
    return {
      list: [],
      loading: false,
      pageNum: 1,
      pageSize: 2,
      totalPge: "",
      finished: false
    };
  },
  components: {
    Footer
  },
  methods: {
    //上拉加载 分页
    onLoad() {
      setTimeout(() => {
        let url = "/scenery/getList";
        let data = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        };
        this.$axios
          .post(url, data)
          .then(res => {
            // console.log(res, "res");
            this.totalPge = res.totalPge;
            res.list.forEach(lists => {
              this.list.push(lists);
            });
            // 数据全部加载完成
            if (res.list <= this.pageSize) {
              this.finished = true;
            }
          })
          .then(() => {
            this.pageNum++; //页数增替
            // console.log(this.list);
            // 加载状态结束
            this.loading = false;
          });
      }, 800);
    },
    jump(inem) {
      let { sceneryId } = inem;
      this.$router.push({
        path: "goods/goodsList",
        query: {
          sceneryId
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../style/home.less";
</style>

